<script>
  export default {
    name: "LoginPage",
    data() {
      return {
        confirm_disabled:false,
        loading: false,//页面加载状态
        codeURL: null, //验证码图片
        loginForm: { //表单项
          no: "",
          password: "",
        },
        rules: { //验证规则
          no: [{ required: true, message: "请输入账号", trigger:'blur'}],
          password: [{ required: true, message: "请输入密码", trigger:'blur'}],
        },
      };
    },
    methods:{
      confirm(){
        this.$refs.loginForm.validate((valid) => {
          if (valid){//valid成功为true,失败为false
            this.loading = true; // 显示加载状态
            this.confirm_disabled = true; // 禁用按钮
            //去后台验证账号密码
            this.$axios.post(this.$httpUrl+'/user/login',this.loginForm).then(res=>{
              console.log(res)
              if (res.data.code === 200){// 根据实际返回结构调整
                const user = res.data.data.user;
                const menuList = res.data.data.menu;
                //储存
                this.$store.dispatch('login',user)
                sessionStorage.setItem("CurUser",JSON.stringify(user));
                // 明确跳转逻辑
                if (user.roleId === 2){
                  this.$router.replace("/");
                }else {
                  this.$store.commit("setMenu",menuList)
                  this.$router.replace("/IndexPage");
                }
              }
            }) .catch((error) => {
              this.$message.error("请求失败: " + error.message);
              console.error("详细错误信息:", error.response);
            }).finally(() => {
                  this.loading = false; // 隐藏加载状态
                  this.confirm_disabled = false; // 启用按钮
                });
          }
        });
      },
      toRegister() {
        this.$router.push("/RegisterPage");
      },
    },
  }
</script>
<template>
  <div>
    <div class="bg_box">
      <div class="login_position">
        <div style="width: 350px; height: 460px" class="LoginForm-Panel" v-loading="loading">
          <div class="login">
            <div class="login-title">
              <span>账号登录</span>
            </div>

            <el-form :rules="rules" :model="loginForm" ref="loginForm">
              <el-form-item prop="no">
                <el-input type="text" v-model="loginForm.no" prefix-icon="el-icon-user" autocomplete="off" size="small" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" show-password autocomplete="off" size="small" @keyup.enter.native="confirm"
                          placeholder="请输入密码"></el-input>
              </el-form-item>
              <span style="font-size: 10px; display: flex; flex-direction: row-reverse; width: 100%;  margin-top: 40px; margin-bottom: 10px; text-align: right;" @click="toRegister">没有账号？点我立即注册</span>
              <el-form-item>
                <el-button style="width: 100%;" type="primary" @click="confirm" :disabled="confirm_disabled">确定</el-button>
              </el-form-item>
              <router-view></router-view>
            </el-form>
          </div>
        </div>
      </div>
      <img class="bg_img"
           src="@/assets/login.jpg" alt="加载失败"
           referrer="no-referrer|origin|unsafe-url" width="100%" height="100%" />
    </div>
  </div>
</template>

<style scoped>
.bg_img {
  object-fit: fill;
}
.login_position {
  border-radius: 6px;
  position: absolute;
  top: 160px;
  right: 100px;
  background-color: #fff;
  .login {
    padding: 20px;

    .login-title {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      height: 40px;
      line-height: 1.5;

      a {
        outline: none;
      }
    }

  }

  .el-form-item__content {
    display: flex;
  }

  .login-code {
    margin-left: 5px;
    width: 33%;
    height: 100%;

    img {
      cursor: pointer;
      vertical-align: middle;
      height: 100%;
    }
  }
}

</style>